import React from "react";
const CouponInfo = () => {
    const [searchParams] = React.Router.useSearchParams()
    const cid = searchParams.get('cid') ? searchParams.get('cid') : 0
    const [info, setInfo] = React.useState<any>({rate: '0'})
    const [receivelist, setReceivelist] = React.useState<any>([])

    React.useEffect(() => {
        GetCouponInfoData();
    }, [])
    
    const GetCouponInfoData = async () =>
    {
        let result = await React.HTTP.post('/coupon/info', {
            cid: cid,
            busid: React.Business.id ?? 0
        });

        if(result.code == 1)
        {
            setInfo(result.data.info)
            setReceivelist(result.data.receive)
        }
    }

    const ReceiveEvent = async() =>
    {
        if(Object.getOwnPropertyNames(React.Business).length <= 0)
        {
            React.error('未登陆，请先去登陆', () => React.navigate('/business/login'))
            return false;
        }

        let res = await React.UI.Dialog.confirm({
            content: '是否确认领取优惠券？',
        })

        if(!res) return false;

        let result = await React.HTTP.post('/coupon/receive', {
            cid: cid,
            busid: React.Business.id ?? 0
        })

        if(result.code == 0)
        {
            React.error(result.msg)
            return false;
        }

        React.success(result.msg, () => {});
        GetCouponInfoData();
    }

    return (
        <>
            <link rel="stylesheet" href="/assets/css/coupon-info.css" />

            <React.UI.Image src={info.thumb_text} height={213} fit='cover' />

            {/* 通知 */}
            <React.UI.Swiper direction='vertical' style={{ '--height': '40px' }} indicator={() => false} autoplay loop={true}>
                {
                    receivelist.map((item:any) =>{
                        return(
                            <React.UI.Swiper.Item key={item.id}>
                                <React.UI.NoticeBar content={item.business.mobile_text + '已领取'} color='info' />
                            </React.UI.Swiper.Item>
                        )
                    })
                }
            </React.UI.Swiper>

            <div className="coupon_detail">
                <div className="coupon_info">
                    <div className="left">
                        <div className="left_top">
                            <div>
                                <span>{parseFloat(info.rate) * 100}</span>折
                            </div>
                            <div className="top_info">
                                <div>优惠券</div>
                                <div>COUPON</div>
                            </div>
                        </div>
                    </div>
                    <div className="receive">
                        <React.UI.Button size='small' color='primary' disabled={info.receive_text == true ? true : false} onClick={ReceiveEvent}>{info.receive_text ? '已领取' : '领取'}</React.UI.Button>
                    </div>
                </div>
                <div className="coupon_prompt">
                    <div className="prompt_title">温馨提示：</div>
                    <div><span>•</span>开始时间：{info.createtime_text}</div>
                    <div><span>•</span>结束时间：{info.endtime_text}</div>
                    <div><span>•</span>领取仅限量 {info.total} 张，赶快领取！</div>
                </div>
            </div>
        </>
    )
}
export default CouponInfo;